<template>
  <div class="container">
    <div class="content">
      <div class="singer" @click="toSinger"  :class="{'highlight': singer}">歌手</div>
      <div class="paiwei" @click="toList" :class="{'highlight': list}">排行榜</div>
      <div class="song" @click="toSongs" :class="{'highlight': song}">歌单</div>
      <div class="fm">私人FM</div>
      <div class="mv">mv</div>
      <div class="diantai">电台</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MySidebar",
  data() {
    return {
      singer: '',
      list:'',
      song:'',
    };
  },
  methods: {
    toSinger() {
      this.singer = true
      this.list = false
      this.song = false
      this.$router.push('/singer')
    },
    toList() {
      this.singer = false
      this.list = true
      this.song = false
      this.$router.push('/list')
    },
    toSongs() {
      this.singer = false
      this.list = false
      this.song = true
      this.$router.push('/songs')
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 2.2em;
  background: rgb(206, 5, 5);

  .content {
    display: flex;
    justify-content: center;
    font-size: 0.8em;
    color: #fff;
    padding-top: 0.75em;
    .singer {
      margin-left: -10em;
      margin-right: 5em;
      position: relative;
    }
    .singer::before {
      content: "";
      position: absolute;
      top: -1px;
      left: -18px;
      right: -18px;
      bottom: -3px;
      border-radius: 1em;
      z-index: 0;  //将元素放置在默认的堆叠层级上
    }

    .singer:hover::before {
      background-color: rgba(24, 24, 24, 0.3);

    }
    .paiwei {
      margin-right: 5em;
      position: relative;
    }
    .paiwei::before {
      content: "";        //content: ""; 是用于设置伪元素的内容的 CSS 属性,用于在元素的内容位置插入一些额外的内容
      position: absolute;
      top: -1px;
      left: -18px;
      right: -18px;
      bottom: -3px;
      border-radius: 1em;
      transition: background-color 0.3s ease-in-out;
      z-index: 0;
    }
    .paiwei:hover::before {
        background-color: rgba(24, 24, 24, 0.3);
    }
    .song {
      margin-right: 5em;
      position: relative;
    }
    .song::before {
      content: "";        //content: ""; 是用于设置伪元素的内容的 CSS 属性,用于在元素的内容位置插入一些额外的内容
      position: absolute;
      top: -1px;
      left: -18px;
      right: -18px;
      bottom: -3px;
      border-radius: 1em;
      transition: background-color 0.3s ease-in-out;
      z-index: 0;
    }
    .song:hover::before {
        background-color: rgba(24, 24, 24, 0.3);
    }
    .fm {
      margin-right: 5em;
      position: relative;
    }
    .fm::before {
      content: "";        //content: ""; 是用于设置伪元素的内容的 CSS 属性,用于在元素的内容位置插入一些额外的内容
      position: absolute;
      top: -1px;
      left: -18px;
      right: -18px;
      bottom: -3px;
      border-radius: 1em;
      transition: background-color 0.3s ease-in-out;
      z-index: 0;
    }
    .fm:hover::before {
        background-color: rgba(24, 24, 24, 0.3);
    }
    .mv {
      margin-right: 5em;
      position: relative;
    }
    .mv::before {
      content: "";        //content: ""; 是用于设置伪元素的内容的 CSS 属性,用于在元素的内容位置插入一些额外的内容
      position: absolute;
      top: -1px;
      left: -18px;
      right: -18px;
      bottom: -3px;
      border-radius: 1em;
      transition: background-color 0.3s ease-in-out;
      z-index: 0;
    }
    .mv:hover::before {
        background-color: rgba(24, 24, 24, 0.3);
    }
    .diantai {
        position: relative;
    }
    .diantai::before {
      content: "";        //content: ""; 是用于设置伪元素的内容的 CSS 属性,用于在元素的内容位置插入一些额外的内容
      position: absolute;
      top: -1px;
      left: -18px;
      right: -18px;
      bottom: -3px;
      border-radius: 1em;
      transition: background-color 0.3s ease-in-out;
      z-index: 0;
    }
    .diantai:hover::before {
        background-color: rgba(24, 24, 24, 0.3);
    }
    .highlight {
      padding: 0.1em 1em;
      border-radius: 1em;
      background-color: rgba(24, 24, 24, 0.3);
  }
  }
  
}
</style>